<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后台登陆</title>
    <base href="${basePath}">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <style>
        #d1{
            width: 50%;
            height: 400px;
        }
        #d1 img{
            display: block;
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h2>欢迎登陆XXX系统</h2>
    <form action="upload" enctype="multipart/form-data" method="post">
        <input type="file" name="file" id="file">
        <input type="text" name="username">
        <button type="submit">上传</button>
        <button type="button" id="btn">上传2</button>
    </form>
<div id="d1">
    <img id="img" src="" alt="">
</div>
</body>
<script>
    $(function () {
        $("#btn").click(function () {

            let file = $("#file")[0].files[0];
            console.log(file)
            if(file.type !== "image/jpeg" && file.type !== "image/png" && file.type !== "image/gif"){
                layer.msg("请上传图片！",{icon:5});
                return;
            }

            let formData = new FormData();
            formData.append("file",file);
            $.ajax({
                url:"upload",
                method:"post",
                dataType:"json",
                processData: false,
                contentType: false,
                data:formData,
                success(res) {
                    if(res.code === 200){
                        $("#img").prop("src","upload/"+res.msg);
                    }
                }
            })
        });
    })
</script>
</html>
